<template>
  <div>
    <el-dialog title="设置库存上下限预警数量" :visible.sync="dialogVisible" lock-scroll width="500px">
      <div class="dialog_div_new">
        <div class="dialog_middle">
          <p class="line_p"><span>仓库：</span><span><b>全部</b></span></p>
          <div class="input_line nomt">
            <!-- <el-checkbox v-model="dialogData.highStockState"></el-checkbox> -->
            <span>库存上限：</span>
            <input @blur="updateNumber('highStockShow')"  @input="inputNumber('highStockShow')" :disabled="!dialogData.highStockState" v-model="dialogData.highStockShow" />
            <span class="tips">超过此数量则报警</span>
          </div>
          <div class="input_line nomt2">
            <!-- <el-checkbox v-model="dialogData.miniStockState"></el-checkbox> -->
            <span>库存下限：</span>
            <input @blur="updateNumber('miniStockShow')"  @input="inputNumber('miniStockShow')" :disabled="!dialogData.miniStockState" v-model="dialogData.miniStockShow" />
            <span class="tips">低于此数量则报警</span>
          </div>
        </div>
        <div class="dialog_bottom">
          <el-button type="primary" @click.stop="onSubmitYjsl">保存</el-button>
          <el-button @click.stop="dialogVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 公共方法
import { formatFour, formatNumber, delcommafy } from '@/utils/index'

export default {
  props: {
  },
  watch: {
    dialogVisible(val) {
      if (val == false) {
        // 清空弹窗数据
        // this.dialogData.highStockState = false
        // this.dialogData.miniStockState = false
        this.dialogData.highStockState = true
        this.dialogData.miniStockState = true
        this.dialogData.highStock = ''
        this.dialogData.highStockShow = ''
        this.dialogData.miniStock = ''
        this.dialogData.miniStockShow = ''
      }
    },
  },
  data () {
    return {
      dialogVisible: false,
      dialogData: {
        highStockState: true,
        highStock: '',
        highStockShow: '',
        miniStockState: true,
        miniStock: '',
        miniStockShow: '',
      },
      numLength: 2,
    }
  },
  created() {
    // 获取小数位数
    let unititem = this.$lcStorage.get('toFixedList')
    if (unititem) {
      this.numLength = unititem.number
    }
  },
  methods: {
    onSubmitYjsl () {
      this.$emit('onSubmitYjsl', this.dialogData)
    },
    // 转换数据
    updateNumber(key) {
      switch (key) { 
        case 'highStockShow':
          this.dialogData.highStock = this.dialogData.highStockShow
          // this.dialogData.highStock = formatFour(delcommafy(this.dialogData.highStockShow))
          // this.dialogData.highStockShow = formatNumber(delcommafy(this.dialogData.highStock))
          break
        case 'miniStockShow':
          this.dialogData.miniStock = this.dialogData.miniStockShow
          // this.dialogData.miniStock = formatFour(delcommafy(this.dialogData.miniStockShow))
          // this.dialogData.miniStockShow = formatNumber(delcommafy(this.dialogData.miniStock))
          break
      }
    },
    // 控制输入不能超过限制位数
    inputNumber(key) {
      this.dialogData[key] = this.dialogData[key].replace(/[^0-9]/g,'')
      // //首位不能输入"."
      // this.dialogData[key] =  this.dialogData[key].replace(/^\./g, '0.')
      // val[key] = val[key].replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
      // val[key] = val[key].replace(".","$#$").replace(/\./g,"").replace("$#$",".");
      // if (this.numLength === 2) {
      //   // 小数点后面保留2位
      //   this.dialogData[key] =  this.dialogData[key].replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
      // } else {
      //   // 小数点后面保留4位
      //   this.dialogData[key] =  this.dialogData[key].replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3')
      // }
    },
  },
}
</script>

<style lang="scss" scoped>
$font-size: 12px;
$height-input: 30px; //0.55rem的高度
$height: 50px; //1rem的高度

::v-deep .el-dialog {
  margin-top: 33vh !important;

  .el-dialog__body {
    padding: 0;
  }

  .el-dialog__header {
    width: 100%;
    height: $height;
    box-sizing: border-box;
    padding: 0 12px 0 13px;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
      font-size: 16px;
      color: #666;
      font-weight: 600;
      width: 176px;
      font-family: PingFang SC;
      line-height: 22px;
    }

    .el-dialog__headerbtn {
      position: static;

      .el-icon-close {
        color: #999;
        font-size: 16px;
      }
    }
  }
}
.dialog_div_new {
  width: 100%;
  height: 258px;
  overflow: auto;
  background: #fff;

  .dialog_middle {
    padding: 20px  43px 27px 51px;
    overflow: auto;

    .line_p {
      height: $height-input;
      line-height: $height-input;
    }

    .input_line {
      display: flex;
      align-items: center;
      height: 24px;

      ::v-deep .el-checkbox {
        width: 16px;
        height: 16px;
        margin-right: 18px;

        .el-checkbox__input {
          width: 100%;
          height: 100%;
          display: flex;

          .el-checkbox__inner {
            width: 100%;
            height: 100%;
          }
        }

        .el-checkbox__input.is-checked .el-checkbox__inner,
        .el-checkbox__input.is-indeterminate .el-checkbox__inner {
          background-color: #1890ff;
          border-color: #1890ff;
        }

      }

      span {
        display: flex;
        font-size: $font-size;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
      }

      .tips{
        margin-left: 11px;
      }

      input {
        margin-left: 20px;
        height: 24px;
        background: #ffffff;
        border: 1px solid #e3e3e3;
        font-size: $font-size;
        color: #666;
        box-sizing: border-box;

        &:focus {
          outline: none;
          border-color: #1890ff;
        }
      }

      >div {
        display: flex;
        align-items: center;
      }
    }

    .nomt {
      margin-top: 20px;
    }
    .nomt2 {
      margin-top: 16px;
      margin-bottom: 20px;
    }
  }

  .dialog_bottom {
    width: 100%;
    height: $height-input;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    ::v-deep .el-button {
      width: 60px;
      height: $height-input;
      text-align: center;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: $font-size;
      border-radius: 0.1rem;
      background: #fff;
      border: 1px solid #dddddd;
      color: #666666;
    }

    ::v-deep .el-button--primary {
      background: #1890ff;
      border-color: #1890ff;
      color: #fff;
      margin-right: 15px;
    }
  }
}
</style>